<template>
    <div class="PlayOrderDetails">
      <myHead title="订单详情"></myHead>
      <div class="info">
        <div class="info_top">
          <div class="info_img"><img src="../../../static/img/bannerwanle.png" alt=""></div>
          <div class="info_msg">
            <p class="info_tit">马来西亚英女皇钟楼七日游(含门票 索道、摆渡车)</p>
            <div class="info_money"><p>1999元/张</p><p>×1</p></div>
            <p class="info_money1">规格：1999元七日游</p>
          </div>
        </div>
        <p class="info_ts">注：请于当日13点前消费，当日13点前均可下单</p>
      </div>
      <div class="shop">
        <div class="shop_tit">商品二维码</div>
        <div class="shop_time">使用时间：2020-04-07至2020-04-08</div>
        <div class="shop_ewm">
          <div class="shop_ewm_num">券码：2856 0089 6421</div>
          <div class="shop_ewm_img"><img src="../../../static/img/erweima@2x.png" alt=""></div>
          <div class="shop_ewm_msg">
            <img src="../../../static/img/jinggao511.png" alt="">
            <p>未核销前，请勿将二维码/数字码随意告知他人 以保证资金安全</p>
          </div>
        </div>
        <div class="shop_money">
            <p>实付金额</p><p>￥1999</p>
        </div>
        <div class="shop_tel">
          <p>联系卖家</p>
          <p @click="show=true"><span>029-3008808820</span><img src="../../../static/img/rxdh.png" alt=""></p>
        </div>
      </div>

      <van-action-sheet
        v-model="show"
        cancel-text="取消"
        @cancel="show=false"
      >
        <div class="shop_tels">
          <p @click="tel('029-3008808820')"><span>029-3008808820</span></p>
        </div>
      </van-action-sheet>
    </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "PlayOrderDetails",
    components:{
      myHead
    },
    data(){
      return {
        show:false
      }
    },
    methods:{
      // 调用拨号功能
      callPhone (phoneNumber) {
        window.location.href = 'tel://' + phoneNumber;
      },
      tel(){
       this.callPhone('029-3008808820')
      }
    }
  }
</script>

<style scoped>
  .PlayOrderDetails {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #F0F0F0;
  }
  .info {
    padding: .15rem;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }
  .info_top {
    height: 1.1rem;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: .1rem;
  }
  .info_img {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .15rem;
  }
  .info_img>img {
    width: 100%;
    height: 100%;
  }
  .info_msg {
    width: calc(100% - 1.3rem);
    height: 100%;
    box-sizing: border-box;
    padding: .05rem 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .info_tit {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(32,32,32,1);
    line-height:.24rem;
  }
  .info_money {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .info_money>p:nth-child(1),.info_money1 {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .info_money>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .info_ts {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF6262;
  }
  .shop {
    background-color: #FFFFFF;
    padding: 0 .15rem;
  }
  .shop_tit {
    height: .4rem;
    line-height: .4rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .shop_time {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .shop_ewm {
    padding: 0 10%;
    text-align: center;
    margin-top: .3rem;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .shop_ewm_num {
    height: .3rem;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    line-height: .3rem;
    margin-bottom: .15rem;
  }
  .shop_ewm_img {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: .2rem;
  }
  .shop_ewm_img>img {
    width: 100%;
    height: 100%;
  }
  .shop_ewm_msg {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    font-size: 0;
  }
  .shop_ewm_msg>img {
    width: .12rem;
    height: .12rem;
    margin-right: .03rem;
  }
  .shop_ewm_msg>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,98,98,1);
    line-height:.15rem;
  }
  .shop_money {
    height: .5rem;
    padding: 0 .05rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: .01rem solid #F0F0F0;
  }
  .shop_money>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .shop_money>p:nth-child(2) {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF6262;
  }
  .shop_tel {
    height: .5rem;
    padding: 0 .05rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .shop_tel>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .shop_tel>p:nth-child(2) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .shop_tel>p:nth-child(2)>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .shop_tel>p:nth-child(2)>img {
    width: .21rem;
    height: .21rem;
    margin-left: .1rem;
  }

  .shop_tels {
    width: 100%;
    height: .8rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .shop_tels>p {
    width: 100%;
    text-align: center;
  }
  .shop_tels>p>span {
    font-size:.24rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }

/* 动作面板适配 */
  >>> .van-popup--bottom.van-popup--round {
    border-radius: .2rem .2rem 0 0;
  }
  >>> .van-action-sheet__cancel {
    font-size: .16rem;
    line-height: .5rem;
  }
  >>> .van-action-sheet__cancel::before {
    height: .08rem;
  }
</style>
